<template>
    <div>
        <el-dialog v-model="dialogVisible" width="40%" align-center :close-on-click-modal="false" :show-close="false"
            :before-close="handleClose" destroy-on-close draggable>
            <template #header="{ close }">
                <div class="dialog-header flex justify-between items-center">
                    <div>拒评原因</div>
                    <el-icon class="el-icon--left cursor-pointer" @click="close">
                        <CircleCloseFilled color="#fff" />
                    </el-icon>
                </div>
            </template>
            <el-form :model="ruleForm" :rules="rules" label-width="130px" ref="ruleFormRef">
                <!-- 拒评原因 -->
                <div class="bg-white mt-[10px]">
                    <BaseHead>拒评原因</BaseHead>
                    <div class="p-[10px]">
                        <el-form-item label="拒评原因">
                            <el-input v-model="ruleForm.refuseInfo" :autosize="{ minRows: 4, maxRows: 6 }"
                                type="textarea" />
                        </el-form-item>
                        <p>请您填写拒评原因！</p>
                    </div>
                </div>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <div class="operate-btns">
                        <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
                        <el-button type="primary" @click="dialogVisibleMet">关闭</el-button>
                    </div>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import BaseHead from "@/views/project/components/BaseHead.vue";
import { refuseReviewByExpert } from "@/api/achievement/cghj"
import { ElMessage, ElMessageBox } from "element-plus";



const props = defineProps({
    id: String,
})
const dialogVisible = defineModel();
const ruleForm = reactive({
    refuseInfo: ''
})

const ruleFormRef = ref()
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            let parms = {
                reviewObjectId: props.id,
                reviewInfo: ruleForm.refuseInfo
            }
            refuseReviewByExpert(parms).then((res) => {
                if (res.code == 200) {
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                    dialogVisible.value = false
                    ininDate()
                    emit('callBack', "")
                } else {
                    ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
const emit = defineEmits(['callBack']);
const ininDate = () => {
    Object.assign(ruleForm, {
        refuseInfo: ''
    })

}
const handleClose = (done) => {
    ininDate()
    done()
}

const dialogVisibleMet = () => {
    dialogVisible.value = false;
}


</script>

<style scoped lang="scss">
@import url("@/views/achievement/index.scss");

:deep(.el-dialog) {
    padding: 0;
    background-color: #f0f2f5;
    height: 40vh;
    overflow-y: hidden;
}
</style>
<style lang="scss">
.gdlable {
    width: 140px;
}
</style>